@use 'variable/breakpoint' as *;
.hero-1-v1 {
  height: calc(100vh - 50px);
  ::ng-deep {
    .swiper-container {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      .swiper-slide {
        > app-dynamic-component {
          position: static;
        }
      }
    }
    .relative {
      position: static;
    }
    .base-text {
      padding: 0 20px;
      img {
        transform: translate(0px, 0px) !important;
      }
      .text-body {
        max-width: 800px;
      }
    }
  }
  @media #{$lt-md} {
    height: 60vh;
    ::ng-deep {
      .swiper-container {
        .swiper-slide {
          > app-dynamic-component {
            top: 50%;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            @apply flex justify-center items-center w-full h-full;
          }
        }
      }
    }
  }
  @media #{$gt-sm} {
    height: calc(100vh - 110px);
    min-height: 700px;
    ::ng-deep {
      .base-text {
        overflow: visible;
      }
    }
  }
}

:host-context(.full-screen) {
  .hero-1-v1 {
    height: 100vh;
  }
}
